<template>
    <div>
        <Form :label-width="120" inline>
            <Form-item label="发放年月:">
                <DatePicker type="month" v-model="queryParam.ssfc0002"
                            placeholder="请选择发放年月" style="width: 200px"  @on-change="changeSsfc0002"
                            :editable="false" ></DatePicker>
            </Form-item>
            <Form-item label="属地区划:">
                <area-linkage :areaCode.sync="queryParam.azaa0001" :countyDisable=countyState
                              :streetDisable=streetState
                              :communityDisable=communityState></area-linkage>
            </Form-item>
            <Form-item label="姓名:">
                <Input v-model="queryParam.ssdg0001" placeholder="请输入户主姓名" style="width:200px"/>
            </Form-item>
            <Form-item label="身份证号:">
                <Input v-model="queryParam.ssdg0002" placeholder="请输入户主身份证号码" style="width:200px"/>
            </Form-item>
            <Row class="button_row">
                 <span style="float: left;">
                     <Button type="primary"  @click="exportExcelFamily">{{buttonName}}知青救助花名册导出</Button>
                 </span>
                <span style="float: right;">
                     <Button type="primary"  @click="searchQueryNew">查询</Button>
                     <Button type="primary" class="button_item_left" @click="searchResetNew">重置</Button>
                 </span>
            </Row>
        </Form>
        <div class="table_div">
            <vxe-table border
                       resizable
                       row-id="id"
                       :row-key="true"
                       show-overflow="tooltip"
                       highlight-hover-row
                       align="center"
                       header-align="center"
                       ref="xTree"
                       :loading="Loading"
                       :data="tableData">
                <vxe-table-column field="ssdg0001" title="姓名" align="center" width="120" fixed="left"/>
                <vxe-table-column field="ssdg0002" title="身份证号" align="center" width="200" fixed="left"/>
                <vxe-table-column field="ssfc0002" title="发放年月" align="center" width="100" :formatter="renderTime1"/>
                <vxe-table-column field="azaa0002" title="属地区划" align="center" width="300" fixed="left"/>
                <vxe-table-column field="ssdg0018" title="最低生活保障标准" align="center" width="150"/>
                <vxe-table-column field="ssdg0031_name" title="人员状态" align="center" width="120"/>
                <vxe-table-column field="ssdg0034" title="开始享受时间" align="center" width="150" :formatter="renderTime"/>
                <vxe-table-column field="ssdg0033" title="注销时间" align="center" width="150" :formatter="renderTime"/>
                <vxe-table-column field="ssdg0007" title="下乡时间" align="center" width="150" :formatter="renderTime"/>
                <vxe-table-column field="ssdg0008" title="回城时间" align="center" width="150" :formatter="renderTime"/>
                <vxe-table-column field="ssdg0003" title="性别" align="center" width="100"/>
                <vxe-table-column field="ssdg0004" title="联系方式" align="center" width="150"/>
                <vxe-table-column field="ssdg0005" title="出生日期" align="center" width="150" :formatter="renderTime"/>
                <vxe-table-column field="ssdg0006_name" title="社会养老保险" align="center" width="120"/>
                <vxe-table-column field="ssdg0011" title="户口所在地详细地址" align="center" width="300"/>
                <vxe-table-column field="ssdg0013" title="现居住地详细地址" align="center" width="300"/>
                <vxe-table-column field="ssdg0014" title="下乡地点" align="center" width="300"/>
                <vxe-table-column field="ssdg0015" title="银行账号" align="center" width="200"/>
                <vxe-table-column field="ssdg0016" title="开户银行" align="center" width="120"/>
                <vxe-table-column field="ssdg0017" title="开户名称" align="center" width="120"/>
            </vxe-table>
            <Page :total="dataCount" :page-size="pageSize" show-total class="paging"
                  @on-change="handleTableChange" :current="pageNo"></Page>
        </div>
    </div>
</template>

<script>
    import {CommonMixin} from '@/views/common/js/CommonMixin'
    import {getAction, postAction} from '@/api/request'

    export default {
        name: "list",
        mixins: [CommonMixin],
        components: {
            // AreaLinkage2
        },
        data() {
            return {
                countyState: false,
                streetState: false,
                communityState: false,
                tableData: [],
                queryParam: {
                    table: '18103',
                },
                type: "",
                typeName: "",
                buttonName: "",
                statistics: {
                    familyNum: 0,
                    memberNum: 0,
                    sumSsbi0008: 0,
                    helpmoney: 0,
                    money: 0
                },
                ssfc0002: "",
                Loading: true,
                show: false,
                url: {
                    list: "/api/ac/subsistence/ss18900ZXService/list3050",
                    exportExcel: "/api/ac/subsistence/ss18900ZXService/exportExcel",
                },
                exportFileName: "",
            }
        },
        methods: {
            changeSsfc0002() {
                this.ssfc0002 = this.queryParam.ssfc0002
                this.queryParam.azaa0001 = "";
            },
            renderTime1(h) {
                if (h.cellValue) {
                    return this.DateFormat(h.cellValue, 'YYYY-MM');
                }
            },
            searchQueryNew() {
                this.queryParam.ssfc0002 = this.DateFormat(this.queryParam.ssfc0002, 'YYYY-MM');
                this.loadData(1);
            },
            exportExcelFamily() {
                this.queryParam.ssfc0002 = this.DateFormat(this.queryParam.ssfc0002, 'YYYY-MM');
                this.queryParam.table = '18103'
                if (this.checkSsfc0002()) {
                    this.exportExcel();
                }
            },
            //判断发放年月是否为空
            checkSsfc0002() {
                if (!this.queryParam.ssfc0002) {
                    this.$Message.error("请选择发放年月！");
                    return false
                } else {
                    return true
                }
            },
            searchResetNew() {
                this.queryParam = {}
                this.loadData(1);
            },
            loadData(arg) {
                if (arg == 1) {
                    this.pageNo = 1;
                }
                let that = this;
                that.Loading = true;
                let param = Object.assign({}, this.queryParam);
                let url = this.url.list;
                param.pageNo = this.pageNo;
                param.pageSize = this.pageSize;
                postAction(url, param).then((res) => {
                    console.log(res);
                    if (res.data.errcode != 0) {
                        this.$Message.error(res.data.errmsg);
                    } else {
                        that.tableData = res.data.data.results;
                        that.dataCount = res.data.data.totalRecord;
                        // that.statistics = res.data.data.statistics;
                    }
                }).finally(() => {
                    that.Loading = false;
                })
            },
            edit() {
                this.loadData(1);
            }
        },
        created() {
            this.loadData();
        }
        ,
    }
</script>

<style scoped>


    /deep/ .ivu-upload-list {
        display: none;
    }

    /deep/ .ivu-table-cell {
        padding-right: 0px;
        padding-left: 0px;
    }

    /deep/ .ivu-form-item {
        margin-bottom: 10px;
    }

    #statistics {
        height: 50px;
        line-height: 50px;
        width: 100%;
        color: red;
        font-size: 16px;
    }

    #statistics span {
        padding-left: 10px;
        padding-right: 10px;
    }

</style>
